<template>
  <!-- select-none: 使用tailwindcss, 不可选中 -->
  <div class="select-none">
    <img :src="bg" class="wave" />
    <div class="flex-c absolute right-5 top-3">
      <!-- 主题 -->
      <el-switch
        v-model="dataTheme"
        inline-prompt
        :active-icon="dayIcon"
        :inactive-icon="darkIcon"
        @change="dataThemeChange"
      />
    </div>
    <div class="login-container">
      <div class="img">
        <!-- <component> 是一个内置的特殊标签，用于动态渲染不同的组件。通过 :is 特性，你可以指定要渲染的组件。 -->
        <!-- toRaw 是 Vue 3 中的一个函数，用于获取一个响应式对象的原始对象。它通常用于在处理响应式对象时避免不必要的响应式追踪。 -->
        <component :is="toRaw(illustration)" />
      </div>
      <div class="login-box">
        <div class="login-form">
          <avatar class="avatar" />
          <el-form
            v-if="currentPage === 0"
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="loginRules"
            size="large"
          >
            <Motion :delay="100">
              <el-form-item
                :rules="[
                  {
                    required: true,
                    message: '请输入账号',
                    trigger: 'blur',
                  },
                ]"
                prop="username"
              >
                <el-input
                  v-model="ruleForm.username"
                  clearable
                  placeholder="账号"
                >
                  <template #prefix>
                    <el-icon><User /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </Motion>
            <Motion :delay="150">
              <el-form-item prop="password">
                <el-input
                  v-model="ruleForm.password"
                  clearable
                  show-password
                  placeholder="密码"
                >
                  <template #prefix>
                    <el-icon><Lock /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </Motion>
            <Motion :delay="200">
              <el-form-item prop="verifyCode">
                <el-input
                  v-model="ruleForm.verifyCode"
                  clearable
                  placeholder="验证码"
                >
                  <template #prefix>
                    <el-icon><Suitcase /></el-icon>
                  </template>
                  <template #append>
                    <ReImageVerify v-model:code="imgCode" />
                  </template>
                </el-input>
              </el-form-item>
            </Motion>
            <Motion :delay="250">
              <el-form-item>
                <div class="w-full h-[20px] flex justify-between items-center">
                  <el-checkbox v-model="checked">
                    <span class="flex">
                      <select
                        v-model="loginDay"
                        :style="{
                          width: loginDay < 10 ? '10px' : '16px',
                          outline: 'none',
                          background: 'none',
                          appearance: 'none',
                        }"
                      >
                        <option value="1">1</option>
                        <option value="7">7</option>
                        <option value="30">30</option>
                      </select>
                      {{ "天免登录" }}
                      <el-tooltip
                        effect="dark"
                        placement="top"
                        content="勾选并登录后，规定天数内无需输入用户名和密码会自动登入系统"
                      >
                        <el-icon :size="16"><Warning class="ml-1" /></el-icon>
                      </el-tooltip>
                    </span>
                  </el-checkbox>
                  <el-button
                    link
                    type="primary"
                    @click="useUserStoreHook().SET_CURRENTPAGE(4)"
                  >
                    {{ "忘记密码?" }}
                  </el-button>
                </div>
                <el-button
                  class="w-full mt-4"
                  size="default"
                  type="primary"
                  :loading="loading"
                  :disabled="disabled"
                  @click="onLogin(ruleFormRef)"
                >
                  {{ "登录" }}
                </el-button>
              </el-form-item>
            </Motion>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, toRaw, reactive, watch, computed } from "vue";
import { bg, illustration, avatar } from "./utils/static";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
// 为什么使用 ?component
// 简化使用：将 SVG 文件作为 Vue 组件导入后，可以直接在模板中使用，不需要额外的处理。
// 动态属性：可以像操作普通 Vue 组件一样，动态地传递属性和事件。
// 样式控制：可以使用 Vue 的 scoped CSS 或其他样式机制来控制 SVG 的样式。
// 需要配置vite --vite-svg-loader
import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component";
import Motion from "./utils/motion";
import ReImageVerify from "@/components/ReImageVerify/index";
import { useUserStoreHook } from "@/store/modules/user";

const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
dataThemeChange(overallStyle.value);

const ruleForm = reactive({
  username: "admin",
  password: "admin123",
  verifyCode: "",
});
const imgCode = ref("");
const checked = ref(false);
const loginDay = ref(7);
const loading = ref(false);
const disabled = ref(false);
const ruleFormRef = ref(null);
const currentPage = computed(() => {
  return useUserStoreHook().currentPage;
});
watch(checked, (bool) => {
  useUserStoreHook().SET_ISREMEMBERED(bool);
});
watch(loginDay, (value) => {
  useUserStoreHook().SET_LOGINDAY(value);
});

const onLogin = async (formEl) => {
  loading.value = true;
  useUserStoreHook()
    .loginByUsername({ username: ruleForm.username, password: "admin123" })
    .then((res) => {
      if (res.success) {
        // 获取后端路由
        // return initRouter().then(() => {
        //   disabled.value = true;
        //   router
        //     .push(getTopMenu(true).path)
        //     .then(() => {
        //       message("登录成功", { type: "success" });
        //     })
        //     .finally(() => (disabled.value = false));
        // });
      }
    })
    .finally(() => (loading.value = false));
};
</script>

<style scoped>
@import url("@/style/login.css");
</style>

<style scoped lang="scss">
:deep(.el-input-group__append, .el-input-group__prepend) {
  padding: 0;
}
</style>
